import { inject, observer } from 'mobx-react';
import React from 'react';
import { View, Text, Image, TextInput } from "react-native";
import THNav from "../../../components/THNav";
import { ListItem, Overlay } from "react-native-elements";
import { pxToDp } from '../../../utils/stylesKits';
import { BASE_URI, ACCOUNT_CHECKHEADIMAGE, MY_SUBMITUSERINFO, MY_INFO } from "../../../utils/pathMap";
import date from "../../../utils/date";
import ImagePicker from 'react-native-image-crop-picker';
import request from "../../../utils/request";
import Toast from '../../../utils/Toast';
import DatePicker from 'react-native-datepicker';
import Picker from 'react-native-picker';
import CityJson from "../../../res/citys.json";

@inject('UserStore')
@observer

class Index extends React.Component {

    state = {
        // 是否显示 昵称输入框
        showNickName: false,
        // 是否显示 性别选择框
        showGender: false
    }

    // 选择头像
    onPickerImage = async () => {
        // 获取到选中后的图片
        const image = await ImagePicker.openPicker({
            width: 300,
            height: 400,
            cropping: true
        });
        // console.log(image);
        // 将本地图片上传到服务器
        const res = await this.uploadHeadImg(image)
        // console.log(res);
        const header = res.data.headImgShortPath;
        const res2 = await this.onSubmitUser({ header })
        console.log(res2);
    }

    // 完成编辑
    onSubmitUser = async (user) => {
        const res = await request.privatePost(MY_SUBMITUSERINFO, user)

        // 给用户提示
        Toast.smile('修改成功')
        // 刷新数据
        const res2 = await request.privateGet(MY_INFO);
        this.props.UserStore.setUser(res2.data);

        return Promise.resolve(res)
    }

    // 上传头像
    uploadHeadImg = (image) => {
        // 构造参数 发送到后台 完成头像上传
        let formData = new FormData();
        formData.append('headPhoto', {
            // 本地图片的地址
            uri: image.path,
            // 图片的类型
            type: image.mime,
            // 图片的名称
            name: image.path.split('/').pop()
        });
        // 执行头像上传
        return request.privatePost(ACCOUNT_CHECKHEADIMAGE, formData, {
            headers: {
                "Content-Type": "multipart/form-data",
            }
        });
    }

    // 编辑昵称
    nickNameUpdate = async (e) => {
        // 获取到输入框的文本
        const nickname = e.nativeEvent.text;
        // console.log(nickname);
        if (!nickname.trim()) return;
        await this.onSubmitUser({ nickname })
        this.setState({ showNickName: false });
    }

    // 编辑生日
    birthdayUpdate = async (birthday) => {
        // console.log(birthday);
        this.onSubmitUser({ birthday });
    }

    // 编辑性别
    genderUpdate = async (gender) => {
        await this.onSubmitUser({ gender })
        this.setState({ showGender: false });
    }

    // 显示城市选择组件
    showCityPicker = async () => {
        Picker.init({
            // 要显示哪些数据 全国城市数据
            pickerData: CityJson,
            // 默认选择哪个数据
            selectedValue: ["北京", "北京"],
            wheelFlex: [1, 1, 0], // 显示省和市
            pickerConfirmBtnText: "确定",
            pickerCancelBtnText: "取消",
            pickerTitleText: "选择城市",
            onPickerConfirm: this.cityUpdate
        });
        Picker.show();
    }

    // 编辑城市
    cityUpdate = async (arr) => {
        const city = arr[1]
        await this.onSubmitUser({ city })
    }

    // 显示学历选择框
    showXueLiPicker = async () => {
        Picker.init({
            pickerData: ['博士后', '博士', '硕士', '本科', '大专', '高中', '留学', '其他'],
            selectedValue: ['其他'],
            wheelFlex: [1, 0, 0],
            pickerConfirmBtnText: "确定",
            pickerCancelBtnText: "取消",
            pickerTitleText: "选择学历",
            onPickerConfirm: this.xueliUpdate
        });
        Picker.show();
    }

    // 编辑学历
    xueliUpdate = async (arr) => {
        const xueli = arr[0]
        this.onSubmitUser({ xueli })
    }

    // 显示婚姻选择框
    showMarryPicker = async () => {
        Picker.init({
            pickerData: ['单身', '已婚'],
            selectedValue: ['单身'],
            wheelFlex: [1, 0, 0],
            pickerConfirmBtnText: "确定",
            pickerCancelBtnText: "取消",
            pickerTitleText: "选择婚姻状态",
            onPickerConfirm: this.marryUpdate
        });
        Picker.show();
    }

    // 编辑婚姻状态
    marryUpdate = async (arr) => {
        const marry = arr[0]
        await this.onSubmitUser({ marry })
    }

    render() {
        const user = this.props.UserStore.user;
        // console.log(user);
        const { showNickName, showGender } = this.state
        return (
            <View>

                <Overlay isVisible={showNickName} onBackdropPress={() => this.setState({ showNickName: false })} >
                    <TextInput
                        placeholder="修改昵称"
                        onSubmitEditing={this.nickNameUpdate}
                        style={{ width: pxToDp(200), fontSize: pxToDp(16) }}
                    />
                </Overlay>
                <Overlay isVisible={showGender} onBackdropPress={() => this.setState({ showGender: false })}>
                    <View style={{ width: pxToDp(200), height: pxToDp(80), justifyContent: 'space-evenly' }}>
                        <Text style={{ color: '#666', fontSize: pxToDp(16) }} onPress={() => this.genderUpdate('男')} >男</Text>
                        <Text style={{ color: '#666', fontSize: pxToDp(16) }} onPress={() => this.genderUpdate('女')} >女</Text>
                    </View>
                </Overlay>
                <THNav title="编辑信息" />

                {/* 用户信息 */}
                <ListItem
                    title="头像"
                    rightElement={<Image
                        style={{ width: pxToDp(40), height: pxToDp(40), borderRadius: pxToDp(20) }}
                        source={{ uri: BASE_URI + user.header }}
                    />}
                    titleStyle={{ color: '#666' }}
                    chevron
                    bottomDivider
                    onPress={this.onPickerImage}
                />
                <ListItem
                    title="昵称"
                    rightTitle={user.nick_name}
                    titleStyle={{ color: '#666' }}
                    chevron
                    bottomDivider
                    onPress={() => this.setState({ showNickName: true })}
                />
                <View style={{ position: 'relative' }}>
                    <ListItem
                        title="生日"
                        rightTitle={date(user.birthday).format('YYYY-MM-DD')}
                        titleStyle={{ color: '#666' }}
                        chevron
                        bottomDivider
                    />
                    <DatePicker
                        androidMode="spinner"
                        style={{ width: "100%", height: '100%', position: 'absolute', top: 0, left: 0, opacity: 0 }}
                        date={date(user.birthday).format('YYYY-MM-DD')}
                        mode="date"
                        placeholder="设置生日"
                        format="YYYY-MM-DD"
                        minDate="1900-01-01"
                        maxDate={date(new Date()).format('YYYY-MM-DD')}
                        confirmBtnText="确定"
                        cancelBtnText="取消"
                        onDateChange={this.birthdayUpdate}
                    />
                </View>
                <ListItem
                    title="选择性别"
                    rightTitle={user.gender}
                    titleStyle={{ color: '#666' }}
                    chevron
                    bottomDivider
                    onPress={() => this.setState({ showGender: true })}
                />
                <ListItem
                    title="现居城市"
                    rightTitle={user.city}
                    titleStyle={{ color: '#666' }}
                    chevron
                    bottomDivider
                    onPress={this.showCityPicker}
                />
                <ListItem
                    title="学历"
                    rightTitle={user.xueli}
                    titleStyle={{ color: '#666' }}
                    chevron
                    bottomDivider
                    onPress={this.showXueLiPicker}
                />
                <ListItem
                    title="月收入"
                    rightTitle={'15K-25K'}
                    titleStyle={{ color: '#666' }}
                    chevron
                    bottomDivider
                />
                <ListItem
                    title="行业"
                    rightTitle={'产品经理'}
                    titleStyle={{ color: '#666' }}
                    chevron
                    bottomDivider
                />
                <ListItem
                    title="婚姻状态"
                    rightTitle={user.marry}
                    titleStyle={{ color: '#666' }}
                    chevron
                    bottomDivider
                    onPress={this.showMarryPicker}
                />
            </View>
        );
    }
}
export default Index;